<template>
    <div class='tag-page'>
        <div class="header">
            <h1>购物车</h1>
            <div class='heard'>
                <span>已选择商品{{ sunCh }}件（不含运费）:{{ unitFn(sunChPrice) }}</span>
                <span style="margin-left: 20px;padding:5px;border:1px solid #ccc;">结算</span>
            </div>
        </div>
        <ul>
            <li class="List-header">
                <label for=""><input type="checkbox" v-model="all" @click="allChange">全选 {{ all }}</label>
                <span class="List-content">商品信息</span>
                <span>单价</span>
                <span>数量</span>
                <span>金额</span>
                <span>操作</span>
            </li>
            <li v-for="item in tagList">
                <label for="">
                    <input type="checkbox" v-model="item.checked" :value="alllist">
                </label>
                <div class="List-content">
                    <img :src="item.img" alt="">
                    <span>{{ item.content }}</span>
                </div>
                <span>{{ unitFn(item.price) }}</span>
                <span>
                    <button @click="item.num === 1 || item.num--">-</button>
                    <input type="number" v-model="item.num" min="1" max="1000">
                    <button @click="item.num++">+</button>
                </span>
                <span>{{ unitFn(item.price * item.num) }}</span>
                <span><i class="delete" @click="deleteFn(item.id)">删除</i></span>
            </li>
        </ul>
    </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
    name: 'tag-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'tag-page'
        }
    },
    setup() {
        let alllist = ref([])
        let tagList = ref([
            {
                id: '1',
                checked: false,
                img: 'https://img.alicdn.com/bao/uploaded/i2/4028000468/O1CN01FSCCHj1FKO17wO7UV_!!0-item_pic.jpg',
                content: '2021新web前端开发视频课程教程入门精通全栈实战项目零基础培训',
                price: 100,
                num: 1,
            },
            {
                id: '2',
                checked: false,
                img: 'https://img.alicdn.com/bao/uploaded/i4/352798170/TB1XSlka1GSBuNjSspbXXciipXa_!!0-item_pic.jpg',
                content: '现货 你不知道的JavaScript 上卷+中卷+下卷 3册 web前端开发书籍',
                price: 30,
                num: 1,
            }, {
                id: '3',
                checked: false,
                img: 'https://img.alicdn.com/bao/uploaded/i3/3346581898/O1CN01gjFyT71PtKHdJ4sIK_!!0-item_pic.jpg',
                content: '【高阶全套】web前端开发视频教程jQuery网页设计CSS3/javascript',
                price: 138.8,
                num: 1,
            }, {
                id: '4',
                checked: false,
                img: 'https://img.alicdn.com/bao/uploaded/i1/101450072/O1CN01LXctHl1CP17AFZ1qT_!!0-item_pic.jpg',
                content: 'JavaScript高级程序设计(第3版)JS入门到精通书籍JavaScript权指南配套前',
                price: 73.9,
                num: 1,
            }, {
                id: '5',
                checked: false,
                img: 'https://img.alicdn.com/imgextra/i1/352798170/O1CN01bQTNb42ADuRybT7dd_!!352798170-0-lubanu-s.jpg',
                content: '计算机网络实验教程 2版二版 高等教育出版社 钱德沛 张力军 计算机网络工程技术参考书 计算机类专业网络实验课程教材图书籍',
                price: 46.5,
                num: 1,
            },
        ]);
        let fn = () => {
            if (!content.value) {
                alert('请输入内容');
                return;
            }
            tagList.value.push({ id: Math.random() + "", content: content.value, color: color.value });
            content.value = '';
        };
        let deleteFn = (id) => {
            tagList.value = tagList.value.filter(item => item.id !== id);
        }
        let unitFn = (val) => {
            return "¥" + val.toFixed(2);
        }
        let all = ref(computed(() => {
            let checked = tagList.value.filter(item => item.checked === true);
            return checked.length === tagList.value.length;
        }));
        let allChange = () => {
            all.value = !all.value;
            let sss = []
            for (let s of tagList.value) {
                s.checked = !s.checked
                sss.push(s)
            }
            console.log('sss', sss);
            return sss;
        }
        let sunCh = computed(() => {
            return tagList.value.reduce((total, item) => item.checked === true ? total + item.num : total, 0)
        })
        let sunChPrice = computed(() => {
            return tagList.value.reduce((total, item) => item.checked === true ? total + item.num * item.price : total, 0)
        })
        return {
            tagList,
            fn,
            deleteFn,
            unitFn,
            all,
            allChange,
            sunCh,
            sunChPrice,
        }
    }
}
</script>

<style scoped lang="less">
.tag-page {
    width: 60%;
    margin: 0 auto;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #000;
    }

    ul {
        padding: 20px;
        list-style: none;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-radius: 5px;
            margin: 10px 0;
            // height: 120px;
            background: #EEEEEE;

            .List-content {
                width: 250px;
                display: flex;
                // justify-content: space-between;
                text-align: left;

                // align-items: left;
                & span {
                    margin-left: 10px;
                }
            }

            &.List-header {
                height: 10px;
                font-size: 16px;
                margin: 0;

                .List-content {
                    display: flex;
                    justify-content: center;
                }
            }

            & .delete {
                font-size: 15px;
                font-weight: 600;
            }
        }

        img {
            width: 90px;
            height: 90px;
            object-fit: cover;
        }
    }
}
</style>